<template>
    <div class="left-container">
        <div class="container1">
            <div class="content-row">
                <TitleRow title="办件整体情况分析" />
                <div class="ztqk">
                    <div :class="`row${index+1}`" v-for="(item,index) in ztqkList" :key="index" class="ztqk-row">
                        <div class="row-info">
                            <div class="ztqk-name">{{item.name}}</div>
                            <div class="ztqk-num">{{item.num}}</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="content-row">
                <TitleRow title="办件类型同环比分析" />
                <div class="bjlx" id="bjlx">
                    <ul>
                        <li v-for="(item,index) in bjlxList" :class="`stat-li${index<8?index+1:9}`" :key="index">
                            <div style="opacity: 1;height:190;width:140">
                                <div class="stat-li-title">
                                    {{item.big_class_type}}
                                </div>
                                <div class="bjlx-content">
                                    <div class="bjlx-row">
                                        <div>
                                            <span class="left-row">
                                                办件：
                                            </span>
                                            <span>{{item.nowCount}}</span>
                                        </div>
                                    </div>
                                    <div class="bjlx-row">
                                        <div>
                                            <span class="left-row">
                                                同比：
                                            </span>
                                            <span>{{Math.abs(item.lastCount)}}</span>
                                        </div>
                                        <img v-if="Number(item.lastCount)>=0" class="bjlx-status-img" src="../../assets/dp3/up.png" alt="">
                                        <img v-else class="bjlx-status-img" src="../../assets/dp3/down.png" alt="">
                                    </div>
                                    <div class="bjlx-row">
                                        <div>
                                            <span class="left-row">
                                                环比：
                                            </span>
                                            <span>{{Math.abs(item.beforeCount)}}</span>
                                        </div>
                                        <img v-if="Number(item.beforeCount)>=0" class="bjlx-status-img" src="../../assets/dp3/up.png" alt="">
                                        <img v-else class="bjlx-status-img" src="../../assets/dp3/down.png" alt="">
                                    </div>
                                    <div class="bjlx-row">
                                        <div>
                                            <span class="left-row">
                                                办结率：
                                            </span>
                                            <span>{{(item.finishRatio*100).toFixed(2)}}%</span>
                                        </div>
                                    </div>
                                    <div class="bjlx-row">
                                        <div>
                                            <span class="left-row">
                                                同比：
                                            </span>
                                            <span>{{Math.abs(item.lastFinishRatio)*100}}%</span>
                                        </div>
                                        <img v-if="Number(item.lastFinishRatio)>=0" class="bjlx-status-img" src="../../assets/dp3/up.png" alt="">
                                        <img v-else class="bjlx-status-img" src="../../assets/dp3/down.png" alt="">
                                    </div>
                                    <div class="bjlx-row">
                                        <div>
                                            <span class="left-row">
                                                环比：
                                            </span>
                                            <span>{{Math.abs(item.beforeFinishRatio)*100}}%</span>
                                        </div>
                                        <img v-if="Number(item.beforeFinishRatio)>=0" class="bjlx-status-img" src="../../assets/dp3/up.png" alt="">
                                        <img v-else class="bjlx-status-img" src="../../assets/dp3/down.png" alt="">
                                    </div>
                                </div>

                            </div>
                        </li>

                    </ul>
                </div>
            </div>
        </div>
        <div class="flex">
            <div class="content-row">
                <TitleRow title="驳回情况分析" />
                <div class="bjfl">
                    <div class="bjfl-stat-container">
                        <div id="bjflStat"></div>
                        <div class="inner-circle1">
                            <div class="inner-circle2"></div>
                        </div>
                        <div class="inner-circle3">
                        </div>
                    </div>

                    <div class="qk-row1">
                        <span class="qk-label">整体情况：</span>
                        <span class="qk-value value1">{{ztqkAll.allBack}}/{{ztqkAll.total}}</span>
                        <span class="qk-value">{{ztqkAll.ratio}}</span>
                    </div>
                    <div class="qk-row2">
                        <div v-for="(item,index) in blqkList" :key="index" class="qk-info-row">
                            <div class="item-center">
                                <div :class="`circle${index+1}`" class="qk-circle "></div>
                                <span class="font-12">{{item.name}} ：</span>
                                <span class="num1">{{item.total}}/{{ztqkAll.total}}</span>
                            </div>
                            <div class="p-num">{{item.ratio}}</div>
                        </div>
                    </div>

                </div>
            </div>
            <div class="content-row">
                <TitleRow title="各窗口办件情况分析" />
                <div class="ckbj">
                    <div v-for="(item,index) in ckbjList" :key="index" class="ckbj-row">
                        <div class="ckbj-name">{{item.name}}</div>
                        <div class="ckbj-num1">{{item.done}}</div>
                        <div class="ckbj-num2">{{item.all}}</div>
                        <div class="ckbj-percent">{{item.ratio}}</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="container2">
            <div class="ygzw">
                <div class="ygzw-title">
                    <div class="ygzw-title-bg1">
                        阳光政务
                    </div>
                    <div class="ygzw-title-bg2">
                        面对面
                    </div>
                </div>
                <ul class="ygzw-content">
                    <li v-for="(item,index) in ygzwList" :key = "index" :class = "{bg1:index==0}" class="ygzw-bg">
                        <div class="ygzw-logo">
                            <img :src="require(`../../assets/dp3/user-logo${index+1}.png`)" alt="">
                        </div>
                        <div class="ygzw-index">{{index+1}}</div>
                        <div class="ygzw-info">
                            <div class="ygzw-info-title">
                                <span>{{item.leader}}</span>
                                <span class="font-16 yellow">{{item.finishRate*100}}%</span>
                            </div>
                            <div class="ygzw-info-list">
                                <div class="row-list">
                                    <span>活动期数:&nbsp;&nbsp;</span>
                                    <span class="yellow">{{item.period}}</span>
                                </div>
                                <div class="row-list">
                                    <span>征集堵点:&nbsp;&nbsp;</span>
                                    <span class="yellow">{{item.collectPoint}}</span>
                                </div>
                                <div class="row-list">
                                    <span>解决堵点:&nbsp;&nbsp;</span>
                                    <span class="yellow">{{item.solvePoint}}</span>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>

            </div>
            <div class="bxbl">
                <TitleRow title="并行并联审批情况分析" />
                <div id="bxblStat">

                </div>
            </div>
        </div>
    </div>
</template>

<script>
import TitleRow from "./titleRow";
import Swiper from "swiper";
import { option1, option2 } from "./statConfig";
import {
    getBjztqkfx,
    getWindowSituation,
    getParallelSituation,
    getHandleTypeSituation,
    getFaceToFace,
    getCyclicRatio,
} from "../../config/api";
import echarts from "echarts";
import ZoomPic from "../../utils/zoomSwiper";
import Pubsub from "../../utils/pubsub";

const userLogo1 = require("../../assets/dp3/user-logo1.png");
const userLogo2 = require("../../assets/dp3/user-logo2.png");
const userLogo3 = require("../../assets/dp3/user-logo3.png");
const userLogo4 = require("../../assets/dp3/user-logo4.png");
const userLogo5 = require("../../assets/dp3/user-logo5.png");

export default {
    components: {
        TitleRow
    },
    data() {
        return {
            commonRequest: {
                town: "",
                type: ""
            },
            ztqkList: [
                //办件整体情况列表
                { name: "累积", num: 0 },
                { name: "当年", num: 0 },
                { name: "当月", num: 0 },
                { name: "当日", num: 0 }
            ],
            ckbjList: [
                //各窗口办件情况列表
                { name: "统一受理", all: 0, done: 0, ratio: "0%" },
                { name: "业务受理", all: 0, done: 0, ratio: "0%" },
                { name: "统一制证", all: 0, done: 0, ratio: "0%" }
            ],
            blqkList: [
                { name: "办事咨询", done: 0, total: 0, ratio: "0%" },
                { name: "材料不全", done: 0, total: 0, ratio: "0%" },
                { name: "信息错误", done: 0, total: 0, ratio: "0%" },
                { name: "事项错误", done: 0, total: 0, ratio: "0%" },
                { name: "审核不过", done: 0, total: 0, ratio: "0%" },
            ],

            bjlxList: [],
            ygzwList:[
                {leader:"王月琴",finishRate:"0%",period:"0",collectPoint:"0",solvePoint:0},
                {leader:"李和平",finishRate:"0%",period:"0",collectPoint:"0",solvePoint:0},
                {leader:"王德军",finishRate:"0%",period:"0",collectPoint:"0",solvePoint:0},
                {leader:"李耀平",finishRate:"0%",period:"0",collectPoint:"0",solvePoint:0},
                {leader:"路军丽",finishRate:"0%",period:"0",collectPoint:"0",solvePoint:0},
            ],
            ztqkAll:{
                all:0,
                done:0,
                ratio:0,
            },
        };
    },
    mounted() {
        this.pubsub_token1 = Pubsub.subscribe("refreshDpData", (t, args) => {
            let { type } = args;
            this.commonRequest.type = type;
            this.initData();
        });
        this.initSwiper();
        this.initStat();
        this.initData();
        this.getCyclicRatioData();//同环比分析
        this.getFaceToFaceData();//阳光面对面


    },
    destroyed(){
        this.pubsub_token1 && Pubsub.unsubscribe(this.pubsub_token1);
    },
    methods: {
        /**
         * 初始化请求数据。
         */
        initData(){
            this.getBjztqkData();//办件整体情况分析
            this.getWindowSituationData();//各窗口办件情况分析
            this.getParallelSituationData();//各窗口办件情况分析
            this.getHandleTypeSituationData();//驳回情况分析

        },
        getCyclicRatioData(){
            getCyclicRatio(this.commonRequest).then((result = {})=>{
                this.bjlxList = result.data || [];
                setTimeout(()=>{
                    new ZoomPic("bjlx");
                },10)

            })
        },
        getFaceToFaceData(){
            getFaceToFace(this.commonRequest).then((result = {})=>{
                this.ygzwList = result.data || [];
            })
        },
        getHandleTypeSituationData(){
            getHandleTypeSituation(this.commonRequest).then((result = {})=>{
                console.log(result,"resultttt")
                let list = result.data || [];
                let stat = list.slice(1,list.length);
                let series = [{}];
                this.ztqkAll = list[0];
                this.blqkList = stat;
                stat.map((item)=>{
                    item.value = item.total;
                })
                series[0].data = stat
                this.myChart1.setOption({
                    series
                });
            })
        },
        getParallelSituationData(){
            getParallelSituation(this.commonRequest).then((result = {})=>{
                let {xAxis,series = []} = result.data;
                let x = [{}],s=[];
                x[0].data = xAxis;
                series.map((item)=>{
                    s.push( {
                        name: item.name,
                        type: 'bar',
                        label: {
                            normal: {
                                // show: true,
                                textStyle: {
                                    color: '#fff', //百分比颜色
                                },
                                position: 'top',
                            }
                        },
                        data: item.data || []
                    })
                })
                this.myChart2.setOption({
                    xAxis:x,
                    series:s,
                });
            })
        },
        getWindowSituationData(){
            getWindowSituation(this.commonRequest).then((result = {})=>{
                let data = result.data || {};
                let {accept = {},make = {},pretrial = {}} = data;
                this.ckbjList[0] = Object.assign(this.ckbjList[0],pretrial);
                this.ckbjList[1] = Object.assign(this.ckbjList[1],accept);
                this.ckbjList[2] = Object.assign(this.ckbjList[2],make);
            })
        },
        getBjztqkData(){
            getBjztqkfx(this.commonRequest).then((result = {})=>{
                let data = result.data || [];
                data.map((item,index)=>{
                    this.ztqkList[index].num = item;
                })
            })
        },
        /**
         * 初始化echarts
         */
        initStat() {
            //办件分类
            this.myChart1 = echarts.init(document.getElementById("bjflStat"));
            this.myChart2 = echarts.init(document.getElementById("bxblStat"));
            this.myChart1.setOption(option1());
            this.myChart2.setOption(option2());
        },
        /**
         * 初始化swiper
         */
        initSwiper() {}
    }
};
</script>

<style lang="scss" scoped>
.left-container {
    width: 936px;
    padding-top: 90px;
    box-sizing: border-box;
}
.content-row {
    width: 468px;
}
.container2 {
    margin-top: 15px;
    display: flex;
}
.container1 {
    margin-top: 6px;
    display: flex;
    .ztqk {
        display: flex;
        height: 200px;
        position: relative;
        margin-top: 20px;
        &-row {
            background: url("../../assets/dp3/left-bjqk.png");
            background-size: 100% 100%;
            width: 182px;
            height: 207px;
            position: absolute;
            .row-info {
                position: absolute;
                height: 55px;
                width: 90px;
                bottom: 0px;
                border: 1px solid #fff;
                left: 41px;
                bottom: 21px;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
            }
            .ztqk-name {
                color: #306d9b;
            }
            .ztqk-num {
                color: #916300;
                // margin-top: 5px;
                font-size: 18px;
            }
        }
        .row1 {
            left: -20px;
        }
        .row2 {
            left: 90px;
        }
        .row3 {
            left: 200px;
        }
        .row4 {
            left: 310px;
        }
    }
}
.bjlx {
    width: 468px;
    // height: 208px;
    margin-top: 10px;
    position: relative;
}
.bjlx-status-img {
    position: absolute;
    right: 0;
}

#bjlx {
    position: relative;
    width: 400px;
    height: 200px;
    margin-left: 40px;
    ul {
        position: relative;
        width: 400px;
        height: 200px;
        li {
            z-index: 0;
            position: absolute;
            overflow-y: hidden;
            cursor: pointer;
            border-radius: 4px;
            box-shadow: 1px 1px 12px rgba(200, 200, 200, 1);
            color: #333;
            .stat-li-title {
                line-height: 30px;
                height: 30px;
                text-align: center;
                border-bottom: 1px solid #e7c94d;
            }
        }
        .bjlx-content {
            box-sizing: border-box;
            // font-size: 12px;
            padding: 14px 8px;
        }
        .bjlx-row {
            .left-row {
                width: 57px;
                display: inline-block;
                text-align: right;
            }
            display: flex;
            // justify-content: center;
            align-items: center;
            position: relative;
            margin-bottom: 5px;

            &:last-child {
                margin-bottom: 0;
            }
        }
        .stat-li1 {
            display: block;
            width: 124px;
            height: 170px;
            top: 20px;
            left: 50px;
            z-index: 2;
            background-color: #ffcc02;
        }
        .stat-li2 {
            display: block;
            width: 140px;
            height: 190px;
            top: 6px;
            left: 115px;
            z-index: 3;
            background-color: #ffcc02;
        }
        .stat-li3 {
            display: block;
            width: 102px;
            height: 140px;
            top: 40px;
            left: 0px;
            z-index: 1;
            background-color: #ffcc02;
        }
        .stat-li4 {
            display: block;
            width: 124px;
            height: 170px;
            top: 20px;
            left: 200px;
            z-index: 2;
            background-color: #ffcc02;
        }
        .stat-li5 {
            display: block;
            width: 102px;
            height: 140px;
            top: 40px;
            left: 275px;
            z-index: 1;
            background-color: #e0e0e0;
        }
        .stat-li6 {
            display: block;
            width: 102px;
            height: 140px;
            top: 40px;
            left: 275px;
            z-index: 1;
            background-color: #e0e0e0;
        }
         .stat-li7 {
            display: block;
            width: 102px;
            height: 140px;
            top: 40px;
            left: 275px;
            z-index: 1;
            background-color: #e0e0e0;
        }
         .stat-li8 {
            display: block;
            width: 102px;
            height: 140px;
            top: 40px;
            left: 275px;
            z-index: 1;
            background-color: #e0e0e0;
        }
         .stat-li9 {
            display: block;
            width: 102px;
            height: 140px;
            top: 40px;
            left: 275px;
            z-index: 1;
            background-color: #fff3c4;
        }
    }
}

.bjfl {
    height: 188px;
    margin-top: 15px;
    position: relative;
    box-sizing: border-box;
    padding-right: 22px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    .bjfl-stat-container {
        height: 198px;
        width: 198px;
        left: 20px;
        top: -11px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        z-index: 9999;
        .inner-circle1 {
            height: 103px;
            width: 103px;
            border: 1px dashed #535353;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            z-index: 99;
            .inner-circle2 {
                height: 50px;
                width: 50px;
                border: 1px dashed #535353;
                border-radius: 50%;
                position: absolute;
                z-index: 99;
            }
        }
    }
    .inner-circle3 {
        height: 178px;
        width: 178px;
        background-color: #061f41;
        border-radius: 50%;
        position: absolute;
        // z-index: 9;
    }
    #bjflStat {
        height: 198px;
        width: 198px;
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 999;
    }
    .qk-row1 {
        height: 52px;
        width: 308px;
        background: #183b66;
        // margin-top: 10px;
        // border-bottom-left-radius: 50px;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        padding-right: 14px;
        box-sizing: border-box;
        .qk-label {
            font-size: 18px;
            color: #fff;
        }
        .qk-value {
            font-size: 18px;
            color: #f4e925;
            &.value1 {
                margin-right: 20px;
            }
        }
    }
    .qk-row2 {
        height: 116px;
        margin-top: 5px;
        width: 322px;
        background: #183b66;
        margin-top: 10px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: flex-end;
        padding: 10px 14px 10px 0;
        box-sizing: border-box;

        .qk-info-row {
            color: #fff;
            width: 206px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            // &:last-child {
            //     width: 230px;
            // }
        }
        .qk-circle {
            height: 15px;
            width: 15px;
            border-radius: 50%;
            margin-right: 10px;
            &.circle1 {
                background: #d0e448;
            }
            &.circle2 {
                background: #5eabd8;
            }
            &.circle3 {
                background: #49f0b9;
            }
            &.circle4 {
                background: #f3be8a;
            }
            &.circle5 {
                background: #128294;
            }
        }
        .num1 {
            font-size: 16px;
            color: #f4e925;
        }
        .num2 {
            font-size: 16px;
            color: #bbb;
        }
        .p-num {
            font-size: 16px;
            color: #f4e925;
        }
    }
}
.ckbj {
    height: 190px;
    width: 468px;
    box-sizing: border-box;
    padding: 0 15px;
    margin-top: 14px;
    display: flex;
    justify-content: space-around;
    .ckbj-row {
        height: 190px;
        width: 110px;
        background: url("../../assets/dp3/left-ckbj-bg.png") no-repeat;
        background-size: 100% 100%;
        position: relative;
    }
    .ckbj-name {
        position: absolute;
        height: 30px;
        width: 110px;
        line-height: 30px;
        text-align: center;
        color: #00c6ff;
    }
    .ckbj-num1 {
        position: absolute;
        color: #f4e925;
        font-size: 18px;
        top: 45px;
        left: 20px;
    }
    .ckbj-num2 {
        position: absolute;
        color: #00c6ff;
        top: 80px;
        right: 22px;
    }
    .ckbj-percent {
        position: absolute;
        bottom: 4px;
        height: 56px;
        width: 110px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #f4e925;
        font-size: 16px;
    }
}
#bxblStat {
    height: 210px;
    width: 468px;
}
.ygzw {
    &-index{
        position: absolute;
        color:#fff;
        left:8px;
        bottom:2px;
    }
    &-title {
        height: 43px;
        width: 468px;
        box-sizing: border-box;
        padding: 0 6px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #00c6ff;
        &-bg1 {
            height: 32px;
            width: 132px;
            line-height: 32px;
            font-size: 16px;
            padding-left: 30px;
            box-sizing: border-box;
            text-align: center;
            background: url("../../assets/dp3/ygzw-title-bg1.png") no-repeat;
        }
        &-bg2 {
            height: 32px;
            width: 132px;
            font-size: 16px;
            line-height: 32px;
            padding-left: 24px;
            box-sizing: border-box;
            background: url("../../assets/dp3/ygzw-title-bg2.png") no-repeat;
        }
    }
    &-bg {
        height: 92px;
        width: 212px;
        position: relative;
        margin-bottom: 4px;
        background: url("../../assets/dp3/ygzw-bg.png") no-repeat;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        padding-left: 6px;
        &.bg1 {
            position: absolute;
            top: -63px;
            left: 127px;
        }
        &:nth-of-type(even) {
            margin-right: 20px;
        }
    }
    &-content {
        display: flex;
        flex-wrap: wrap;
        position: relative;
        padding-top: 36px;
        padding-left: 6px;
    }
    &-info {
        padding: 0 15px;
        flex: 1;
        height: 100%;
        display: flex;
        flex-direction: column;
        &-title {
            height: 28px;
            display: flex;
            justify-content: space-between;
            /* align-items: center; */
            padding-top: 7px;
            box-sizing: border-box;
        }
        &-list {
            flex: 1;
            .row-list {
                display: flex;
                color: #77c0eb;
            }
        }
    }
}
</style>